<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Div</title>
<style>
  .resizable-div {
    width: 200px;
    height: 150px;
    background-color: lightblue;
    border: 1px solid black;
    resize: both;
    overflow: hidden;
    position: relative;
  }
</style>
</head>
<body>
  <div class="resizable-div" id="resizableDiv" draggable="true"></div>

  <script>
    const resizableDiv = document.getElementById('resizableDiv');
    let isResizing = false;

    resizableDiv.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', ''); // Required for dragging in some browsers
      isResizing = true;
    });

    resizableDiv.addEventListener('drag', (e) => {
      if (isResizing) {
        const newWidth = e.clientX - resizableDiv.getBoundingClientRect().left;
        const newHeight = e.clientY - resizableDiv.getBoundingClientRect().top;
        resizableDiv.style.width = `${newWidth}px`;
        resizableDiv.style.height = `${newHeight}px`;
      }
    });

    resizableDiv.addEventListener('dragend', () => {
      isResizing = false;
    });
  </script>
</body>
</html>
